<html>
 <head>
  <title> New Document </title>
  	<script src="scripts/mootools-core-1.4-full.js"></script>
	<script src="scripts/mootools-more-1.4-full.js"></script>
	<script src="jcx/1/full.js" charset="utf-8"></script>
	<style>
		.dragging{color:#ff0000}
		div{
			border: 1px solid #666;
			width:90px;
			height:90px;
			margin:8px;
		}
		#img2{
			width:72px;
			height:72px;
			margin:8px;
			border: 1px solid #000;
		}
	</style>
	<script>
		function test(event){
			event = event||window.event;
			var element = event.target||event.srcElement;
			var elementPos = DomUtil.getElementAbsPos(element, true);
			
			$('pointer').innerHTML = element.tagName+' left:'+elementPos.left+', top:'+elementPos.top+';clientX:'+event.clientX+',clientY:'+event.clientY;
		}
		
		function pickElements(event){
			var event = event||window.event;
			var element = event.target||event.srcElement;
			var list = DomUtil.elementsFromPoint(event.clientX, event.clientY);
			for(var i=0;i<list.length;i++){
				var element = list[i];
				if(element.tagName=='DIV'){
					element.style.backgroundColor='#f66';
				}
			}
		}
		
		
		function pickImgs(event){
			var event = event||window.event;
			var element = event.target||event.srcElement;
			var list = DomUtil.imgsFromPoint(event.clientX, event.clientY);
			for(var i=0;i<list.length;i++){
				var element = list[i].element;
				element.style.border='1px solid #e00';
			}
		}
		
		window.addEvent('domready',function(){
			document.onmousemove = test;
			document.onclick = pickImgs;

			//alert($('hello').style.position);
			//alert(DomUtil.getElementStyle($('hello'),'position'));

			//alert($('pointer').style.position);
			//alert(DomUtil.getElementStyle($('pointer'),'position'));
		})
	</script>
</head>
<body>
	<div id='pointer' style="position:absolute; left:600px; top:400px; width:400px"></div>
	
	<h2 id="hello">Hello World!</h2>
	<h2><%=new java.util.Date()%></h2>
	
	<hr />
	<div id="div111">11111</div>
	<hr />
	<hr />
	<hr />
	<div id="div222">222222</div>
	<div>1</div>
	<div id="div2"><img id="img2" src="http://leiphone.qiniudn.com/uploads/new/article/240_160/201412/54a102f3a0ff5.jpg" /></div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>

</body>
	<script type="text/javascript">
	var myDrag = new Drag('div111', {
	    snap: 0,
	    onSnap: function(el){
	        el.addClass('dragging');
	    },
	    onComplete: function(el){
	        el.removeClass('dragging');
	    }
	});
	</script>
</html>
